<template>
  <el-dialog title="退回" :model-value="visible" @close="onClose">
    <el-form :model="form" label-width="100px" ref="form">
      <el-form-item label="当前环节" prop="currentLink">
        <span>{{ name }}</span>
      </el-form-item>
      <el-form-item label="目标环节" prop="target">
        <el-input
          v-model="form.targetText"
          @focus="BackFlowTableVisible = true"
          suffix-icon="el-icon-search"
        />
      </el-form-item>
      <el-form-item label="跳转原因" prop="reason">
        <el-input v-model="form.reason"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="onClose">{{ $t("common.cancel") }}</el-button>
      <el-button type="primary" @click="onSubmit">{{
        $t("common.ok")
      }}</el-button>
    </template>
  </el-dialog>
  <back-flow-table
    v-if="BackFlowTableVisible"
    :proInsId="processIntanceId"
    v-model:target="form.target"
    v-model:text="form.targetText"
    v-model:visible="BackFlowTableVisible"
  />
</template>

<script>
import BackFlowTable from "./BackFlowTable";

export default {
  components: {
    BackFlowTable,
  },
  name: "BackFlow",
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    processDefinitionId: {
      type: String,
      required: true,
    },
    processIntanceId: {
      type: String,
      required: true,
    },
    taskDefinitionKey: {
      type: String,
      required: true,
    },
  },
  emits: ["update:visible"],
  data() {
    return {
      BackFlowTableVisible: false,
      form: {
        processInstanceId: this.proInsId,
        current: this.taskDefinitionKey,
        target: "",
        reason: "",
        targetText: null,
      },
    };
  },
  methods: {
    onClose() {
      this.$refs.form.resetFields();
      this.$emit("update:visible", false);
    },
    async getTaskData() {
      const { name, taskDefinitionKey } = await this.$store.dispatch(
        "historyListStore/getTaskCurrent",
        this.proInsId
      );
      this.form.currentLink = name;
      this.form.current = taskDefinitionKey;
    },
    onSubmit() {
      this.$refs.form.validate((validate) => {
        if (validate) {
          const params = {
            current: this.form.current,
            target: this.form.target,
            reason: this.form.reason,
            processInstanceId: this.form.processInstanceId,
            username: this.form.username,
          };
          const status = this.$store.dispatch(
            "flowInstance/jumpFreeRequest",
            params
          );
          if (status) {
            this.$emit("update:visible", false);
          }
        }
      });
    },
  },
  created() {
    this.getTaskData();
  },
};
</script>

<style>
</style>
